<template>
  <div class="header_item" >
		<el-icon :size="30" :color="props.color">
			<component :is="props.icon"></component>
		</el-icon>
		<section class="right">
			<p class="text">{{props.text}}</p>
			<p class="count">{{props.count}}</p>
		</section>
  </div>
</template>

<script setup>
const props = defineProps(['icon', 'color', 'text', 'count'])
console.dir(props.icon)
</script>

<style scoped lang="scss">
.header_item {
	width: 320px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px #cfcfcf; 
	display: flex;
	align-items: center;
	.el-icon {
		margin: 0 20px;
	}
	.text {
		font-size: 0.8rem;
	}
	.count {
		font-size: 1.2rem;
		font-weight: 700;
	}
}
</style>